<template>
  <div class="add-school">
    <el-form ref="form" :model="formData" label-width="120px">
      <el-form-item label="学校中文名称:" required>
        <el-input v-model="formData.name_zh" placeholder="请输入学校中文名称"></el-input>
      </el-form-item>
      <el-form-item label="学校英文名称:" :required="operationStatus === 'true' ? false : true"> 
        <el-input v-model="formData.name" placeholder="请输入学校英文名称"></el-input>
      </el-form-item>
      <el-form-item label="所在地区:">
        <el-select :disabled="props.parmas.type === 'update'"  v-model="formData.areas_id" placeholder="请选择学校所在地区">
          <el-option v-for="(item,index) in state.areaList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>  
      </el-form-item> 
      <el-form-item label="学校排名:">
        <el-input-number v-model="formData.qs" :min="0" label="请输入学校排名"></el-input-number>
        <span style="margin: 0 10px;">~</span>
        <el-input-number v-model="formData.qs_max" :min="0" label="请输入学校排名"></el-input-number>
      </el-form-item>
      <el-form-item label="学校logo上传:" :required="operationStatus === 'true' ? false : true">
        <el-upload 
          :action="uploadUrl"
          :headers="customHeaders"
          list-type="picture-card"
          :file-list="state.fileList"
          :on-preview="handlePictureCardPreview"
          :on-success="handleProgress"
          :on-exceed="handleExceed"
          :before-upload="beforeAvatarUpload"
          multiple
          :limit="1"
          :on-remove="handleRemove">
          <el-icon><Plus/></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img width="100%" :src="formData.logo" alt="" />
        </el-dialog>
      </el-form-item>
    </el-form>
    <div>
      <el-button @click="onsubmit(0)">取消</el-button>
      <el-button type="primary" @click="onsubmit(1)">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref,reactive,computed,onMounted} from 'vue';
import {Plus } from "@element-plus/icons-vue";
import { ElMessage,ElMessageBox } from 'element-plus';
import API from "@/utils/api";
import { defineProps, defineEmits } from 'vue';
import { serverUrl ,uploadUrl} from '@/utils/const'
computed(() => {
  return uploadUrl
})
onMounted(() => {
  getAreaList()
  if(props.parmas.type === 'update') {
    formData = reactive( {
      areas_id: props.parmas.itemInfo.areas_id,
      qs_max:props.parmas.itemInfo.qs_max,
      qs:props.parmas.itemInfo.qs,
      logo:props.parmas.itemInfo.logo,
      name:props.parmas.itemInfo.name,
      name_zh:props.parmas.itemInfo.name_zh,
    })
    if(props.parmas.itemInfo.logo) {
      state.fileList = [{name:1,url:props.parmas.itemInfo.logo}]
    }
  }else {
    formData = reactive( {
      areas_id: props.parmas.itemInfo.areas_id,
    })
  }
})
let dialogVisible = ref(false)
let dialogImageUrl = ref('')
let operationStatus = ref(localStorage.getItem('operationStatus'))
let formData  = reactive({
  areas_id: '',
  qs:'',
  qs_max:'',
  logo:'',
  name:'',
  name_zh:'',
});
// const uploadUrl= ref(serverUrl + 'admin/upload');
const customHeaders = ref({
  'token-admin': localStorage.getItem('token'),
});
let state = reactive({
  areaList: [],
  fileList:[],
});
const props = defineProps({
  parmas: Object,
});
// console.log(props.parmas,'parmas');
// 获取地区数据
function getAreaList () {
  API.schoolList.getAreaList({}, (res) => {
    if(res.code == 0) {
      state.areaList = res.data
    }
  })
}
const emits = defineEmits(['closeAddSchool']);
// 提交学校数据
function onsubmit(type) {
  if(type === 1) {
    let message = null
    if(operationStatus.value === 'true') {
      message = !formData.name_zh && '请输入学校中文名称' || null;
    }else {
      message = !formData.name_zh && '请输入学校中文名称' 
              || !formData.name && '请输入学校英文名称'
              // || !formData.areas_id && '请选择学校所在地区'
              // || !formData.qs && '请输入学校排名'
              || !formData.logo && '请上传学校logo' || null;
    }
    if(message)  return ElMessage.warning(message)
    if(props.parmas.type === 'add') {
      API.schoolList.addSchoolData({...formData}, (res) => {
        if(res.code == 0) {
          emits('closeAddSchool',type)
          ElMessage.success ('新增成功')
        }else if(res.code == 10000) {
          ElMessageBox.confirm(res.msg, '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {
          API.schoolList.addSchoolData({...formData,confirmed:1}, (res) => {
            if(res.code == 0) {
              ElMessage.success ('新增成功')
              emits('closeAddSchool',type)
            }
          })
        }).catch(() => {})
        } else{
          ElMessage.warning('新增失败')
        }
      })
    }else {
      API.schoolList.modifySchoolData({...formData,id:props.parmas.itemInfo.id}, (res) => {
        if(res.code == 0) {
          emits('closeAddSchool',type)
          ElMessage.success ('修改成功')
        }else if(res.code == 10000) {
          ElMessageBox.confirm(res.msg, '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {
            API.schoolList.modifySchoolData({...formData,id:props.parmas.itemInfo.id,confirmed:1}, (res) => {
              if(res.code == 0) {
                ElMessage.success ('修改成功')
                emits('closeAddSchool',type)
              }
            })
          }).catch(() => {})
        }else {
          ElMessage.warning('修改失败')
        }
      })
    }
  }else {
    emits('closeAddSchool',type)
  }
}
function handleProgress(file, fileListms) {
  if(file.data.length > 0) {
    formData.logo = file.data[0]
  }
}
function handlePictureCardPreview(file, fileListms) {
  dialogImageUrl.value = formData.logo
  dialogVisible.value = true
}
function handleExceed() {
  ElMessage({
    message: '只能上传一张图片',
    type: 'warning'
  });
}
function beforeAvatarUpload(file) {
  const isJPG = (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/webp' || file.type === 'image/png'  || file.type === 'image/gif')
  if (!isJPG) {
    ElMessage.warning('上传轮播图片只能是 JPG/PNG 格式!')
  }
  return isJPG
}
function handleRemove(parafile, fileListms) {
  formData.logo = null
}
</script>

<style lang="scss" scoped>
.add-school {
  max-height: 500x;
  overflow: auto;
}
</style>